<template>
  <div id="app">
    <AppHeader class="app-top"></AppHeader>
    <div class="app-body">
      <div class="body-top">
        <div class="top-left container-wrapper">
          <ThreeDimensional></ThreeDimensional>
        </div>
        <div class="top-right">
          <div class="top-right-col1">
            <InvadeAlarm :is-invade="isInvade" class="row1"></InvadeAlarm>
            <AlarmInfo class="row2" @change-is-invade="isInvade = $event"></AlarmInfo>
          </div>
          <div class="top-right-col2">
            <Video1 class="row1"></Video1>
            <Video2 class="row2"></Video2>
          </div>
        </div>
      </div>
      <div class="body-bottom">
        <div class="bottom-left">
          <div class="bl-row1 container-wrapper">
            <CollisionDay class="container"></CollisionDay>
          </div>
          <div class="bl-row2 container-wrapper">
            <CollisionMonth class="container"></CollisionMonth>
          </div>
        </div>
        <div class="bottom-right">
          <div class="br-row1">
            <div class="br-row1-left container-wrapper">
              <div class="container"></div>
            </div>
            <div class="br-row1-right container-wrapper">
              <CarMinute class="container"></CarMinute>
            </div>
          </div>
          <div class="br-row2 container-wrapper">
            <CarMonth class="container"></CarMonth>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import AppHeader from './components/AppHeader.vue'
  import ThreeDimensional from './components/ThreeDimensional.vue'
  import InvadeAlarm from './components/InvadeAlarm.vue'
  import AlarmInfo from './components/AlarmInfo.vue'
  import Video1 from './components/Video1.vue'
  import Video2 from './components/Video2.vue'
  import Humiture from './components/Humiture.vue'
  import Oxygen from './components/Oxygen.vue'
  import Methane from './components/Methane.vue'
  import HepaticGas from './components/HepaticGas.vue'
  import FanLight from './components/FanLight.vue'
  import CollisionDay from './components/CollisionDay';
  import CollisionMonth from './components/CollisionMonth';
  import CarMinute from './components/CarMinute';
  import CarMonth from './components/CarMonth';

  import animate from 'animate.css'

export default {
  name: 'App',
  components: {
    AppHeader,
    ThreeDimensional,
    InvadeAlarm,
    AlarmInfo,
    Video1,
    Video2,
    Humiture,
    Oxygen,
    Methane,
    HepaticGas,
    FanLight,
    CollisionDay,
    CollisionMonth,
    CarMinute,
    CarMonth
  },
  data(){
    return {
      isInvade: false,
    }
  },
  methods:{

  },
  created(){

  }
}
</script>

<style lang="stylus">
  *
    box-sizing: border-box;
    font-family: PingFangSC;
  html
    width:100%
    height:100%
    overflow: hidden;
    body
      width:100%
      height:100%
      margin: 0;
  #app
    background-image: url("assets/bg.jpg")
    background-repeat: no-repeat repeat
    background-size: 100% 100%, auto
    width: 100%
    height: 100%;
    display: flex
    flex-direction: column
    .app-body
      width: 100%
      flex: 1
      display: flex
      flex-direction: column
      .body-top
        width: 100%
        padding: 0 20px 10px 20px
        flex: 340
        display: flex
        flex-direction: row
        .top-left
          flex: 460
          margin-right: 10px
        .top-right
          flex: 514
          display: flex
          flex-direction: row
          .top-right-col1
            flex: 298
            margin-right: 10px
            display: flex
            flex-direction: column
            .row1
              flex: 160
              margin-bottom: 10px
            .row2
              flex: 160
          .top-right-col2
            flex: 206
            display: flex
            flex-direction: column
            .row1
              flex: 160
              margin-bottom: 10px
            .row2
              flex: 160
      .body-bottom
        width: 100%
        padding: 0 20px 10px 20px
        flex: 370
        display: flex
        flex-direction: row
        .bottom-left
          flex: 460;
          display flex
          flex-direction column
          margin-right: 10px
          .bl-row1
            flex: 1
            margin-bottom: 10px
          .bl-row2
            flex: 1
        .bottom-right
          flex: 514;
          display flex
          flex-direction column
          .br-row1
            flex 1
            display: flex
            flex-direction row
            margin-bottom: 10px
            .br-row1-left
              flex: 1
              margin-right: 10px
            .br-row1-right
              flex: 1
          .br-row2
            flex 1
  .container-wrapper
    display flex
  .container
    flex: 1
    background: rgba(255,255,255,0.05);
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    .title
      font-weight: bolder;
      font-size: 16px;
      color: #7299E4;
    .content-container
      flex: 1;
</style>
